<template>
  <div class="login-title"><h1>登录</h1></div>

    <div>
      <div class="login-container">
        <div class="title" ><h4>管理员登录/注册</h4></div>
        <hr/>
        <form >
          <div class="form-group">
            <label for="exampleInputEmail1">工号</label>
            <input  class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    v-model.trim="user.employeeNumber">
            <label for="exampleInputEmail1">手机号</label>
            <input  class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    v-model.trim="user.phoneNumber">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1"
                   v-model.trim="user.password">
            <label for="exampleInputPassword1">密钥</label>
            <input type="password" class="form-control" id="exampleInputPassword1"
                   v-model.trim="key">
          </div>


          <button type="submit" class="btn btn-primary" @click.prevent="onLoginClick" >登录/注册</button>
        </form>
      </div>

    </div>


</template>

<script>
export default {
  name: 'EmployeeLogin',
  data() {
    return {
      key:"",
      user: {
        employeeNumber:"",
        phoneNumber: "",
        password: "",
        username:""
      }

    }
  },

  methods:{
    async onLoginClick() {
      const {data: res} = await this.$http.post('/employee/login?key='+this.key, this.user)
      console.log(res.data)
      if (res.data === 1) {
        localStorage.setItem("username_E", this.user.employeeNumber)
        await this.$router.push('/employeeMain')

      } else if (res.data === 2) {
        alert('密钥有误')
      } else if (res.data === 3) {
        alert('密码有误')
      }

    }

  }

}
</script>

<style lang="less" scoped>
.login-title {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
  padding: 40px;


}
.choice {
  margin: 0 auto;
  width: 100px;
  height: 40px;

}

.user-choice {
  width: 40px;
  height: 20px;
  display: inline-block;
}

.login-container {
  width: 600px;
  height: 600px;
  background-color: #4d7bf3;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 15px;
  margin: 0 auto;
}

.title {
  color: white;
  margin: 0 auto;

}

.btn {
  color: #4d7bf3;
  background-color: white;

}
.btn-primary {
  margin: 0 auto;
}

</style>
